<template>
  <el-card>
    <template #header>
      <div class="header">
        <el-icon class="icon" size="20" @click="goBack"><ArrowLeft /></el-icon>
        <span>双检政策协同处置任务</span>
      </div>
    </template>
    <div class="content">
      <div class="content-header">
        <div class="content-header-left">
          <div class="content-header-title">基本信息</div>
          <div class="content-header-left-gird">
            <div class="content-header-left-gird-3">
              <div class="content-header-left-gird-item">
                <div class="content-header-left-gird-item-label">任务来源</div>
                <div class="content-header-left-gird-item-content">
                  检查管理
                </div>
              </div>
              <div class="content-header-left-gird-item">
                <div
                  class="content-header-left-gird-item-label"
                  style="width: 132px"
                >
                  牵头部门（单位)
                </div>
                <div class="content-header-left-gird-item-content">民政局</div>
              </div>
              <div class="content-header-left-gird-item">
                <div
                  class="content-header-left-gird-item-label"
                  style="width: 142px"
                >
                  责任部门（单位)
                </div>
                <div class="content-header-left-gird-item-content">
                  民政局、烟草局
                </div>
              </div>
            </div>
            <div class="content-header-left-gird-item">
              <div class="content-header-left-gird-item-label">任务说明</div>
              <div class="content-header-left-gird-item-content">
                调查公司财务状况
              </div>
            </div>
            <div class="content-header-left-gird-item">
              <div class="content-header-left-gird-item-label">佐证材料</div>
              <div
                class="content-header-left-gird-item-content"
                style="color: #1763bc; cursor: pointer"
              >
                双检政策协同处置任务调查报告.jpg
              </div>
            </div>
          </div>
        </div>
        <div class="content-header-rig">
          <div class="content-header-title">基本信息</div>
          <div class="content-header-rig-list">
            <div class="content-header-rig-list-item">
              <div class="content-header-rig-list-item-num">44</div>
              <div class="content-header-rig-list-item-tx">参与总数</div>
            </div>
            <div class="content-header-rig-list-item">
              <div class="content-header-rig-list-item-num">44</div>
              <div class="content-header-rig-list-item-tx">已接受</div>
            </div>
            <div class="content-header-rig-list-item">
              <div class="content-header-rig-list-item-num">44</div>
              <div class="content-header-rig-list-item-tx">未接受</div>
            </div>
            <div class="content-header-rig-list-item">
              <div class="content-header-rig-list-item-num">44</div>
              <div class="content-header-rig-list-item-tx">已提交</div>
            </div>
            <div class="content-header-rig-list-item">
              <div class="content-header-rig-list-item-num">44</div>
              <div class="content-header-rig-list-item-tx">未提交</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-table">
        <div class="btns">
          <el-button type="primary" @click="add">新增</el-button>
          <div class="btns-rig">
            <el-button @click="add">生成台账</el-button>
            <el-input
              v-model="value"
              placeholder="请输入创建时间/标题/发文字号 关键字"
              :suffix-icon="Search"
              style="width: 420px; margin-left: 20px"
            />
          </div>
        </div>
        <MTable
          :columns="columns"
          :http="logList"
          :params="params"
          v-model:isReload="isReload"
          v-model:selectKeys="selectKeys"
        >
          <template #附件>
            <MA>1</MA>
          </template>
          <template #actions="{ row }">
            <MA type="primary" @click="toDetail">查看</MA>
            <MA type="primary">编辑</MA>
            <MA type="primary" @click="shiftToCollaborativeGovernance">删除</MA>
          </template>
        </MTable>
      </div>
    </div>
  </el-card>
  <AddForm ref="AddFormRef" />
</template>

<script setup lang="ts">
import { ArrowLeft, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { columns, fields, dialogFields } from './config'
import { logExport, logList } from '@/api/system/logManagement'
import AddForm from './components/addForm/addForm.vue'
import { ref } from "vue";
const router = useRouter()

//新增
const AddFormRef = ref()
const add = () => {
  AddFormRef.value.show()
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  }
]

//返回
const goBack = () => {
  router.go(-1)
}

// 搜索
const params = ref<any>({
  typeId: 1
})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

// 删除
const selectKeys = ref<number[]>([])
const clearSelectKeysReload = () => {
  selectKeys.value = []
  reload()
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}

</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  .icon {
    margin-right: 16px;
    cursor: pointer;
  }
  span {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }
}
.content {
  width: 100%;
  .content-header {
    width: 100%;
    display: flex;
    border: 1px solid #e9e9e9;
    .content-header-title {
      width: 100%;
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      box-sizing: border-box;
      padding: 20px;
      border-bottom: 1px solid #e9e9e9;
    }
    .content-header-left {
      flex: 1;
      border-right: 1px solid #e9e9e9;
      .content-header-left-gird {
        box-sizing: border-box;
        padding: 20px;
        padding-bottom: 0;
        .content-header-left-gird-3 {
          display: grid;
          width: 100%;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 20px;
        }
        .content-header-left-gird-item {
          display: flex;
          padding-bottom: 20px;
          .content-header-left-gird-item-label {
            font-weight: 500;
            font-size: 18px;
            color: #333333;
            margin-right: 20px;
          }
          .content-header-left-gird-item-content {
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            flex: 1;
          }
        }
      }
    }
    .content-header-rig {
      width: 703px;
      .content-header-rig-list {
        width: 100%;
        height: calc(100% - 61px);
        display: flex;
        justify-content: center;
        align-items: center;
        .content-header-rig-list-item {
          height: 59px;
          position: relative;
          padding-right: 30px;
          margin-right: 30px;
          .content-header-rig-list-item-num {
            font-weight: 500;
            font-size: 22px;
            color: #333333;
            margin-bottom: 5px;
          }
          .content-header-rig-list-item-tx {
            font-weight: 400;
            font-size: 18px;
            color: #333333;
          }
        }
        .content-header-rig-list-item::after {
          content: '';
          height: 59px;
          border: 1px solid #e9e9e9;
          position: absolute;
          right: 0;
          top: 0;
        }
        .content-header-rig-list-item:last-child {
          margin-right: 0;
          padding-right: 0;
        }

        .content-header-rig-list-item:last-child::after {
          border: 0px solid #e9e9e9;
        }
      }
    }
  }
}
.content-table {
  padding-top: 20px;
}
.btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  flex-direction: row;
  .btns-rig {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
